Fullstack Master Class · Bab 1
1 / 20
</> { } DB API UI ⚙

Kelas 10 · Semester 2

BAB 1
Pengenalan Fullstack Web Development

Orientasi Full-Stack & Developer Ecosystem

Tekan → atau klik untuk mulai

Pengenalan

Apa itu Fullstack Developer?

Developer yang menguasai kedua sisi sebuah aplikasi web — bagian yang dilihat pengguna dan mesin di balik layar.

🎨 Frontend
⚙️ Backend
🗄️ Database
🚀 Deployment
Analogi warung: Frontend = etalase & meja kasir, Backend = dapur peracik, Database = lemari stok, Deployment = saat warung resmi buka untuk umum.
</> { } DB API UI ⚙
Sisi yang dilihat

🎨 Frontend

Segala sesuatu yang dilihat & disentuh pengguna di browser: tampilan, tombol, warna, gerak.

  • HTML — kerangka halaman
  • CSS — tampilan & gaya
  • JavaScript — interaksi & logika
Analogi: ruang tamu rumah — yang dilihat & dinikmati tamu.
portofolio-saya.com
Tombol Live
Hover aku! ✨
Sisi di balik layar

⚙️ Backend

"Otak" aplikasi: memproses permintaan, menjalankan logika, mengatur keamanan, dan berbicara dengan database.

  • Memproses login & data pengguna
  • Menjalankan aturan bisnis
  • Menjembatani Frontend ↔ Database
Analogi: dapur restoran — tamu tak lihat, tapi semua diolah di sini.
⚙️ ⚙️ ⚙️
Contoh stack: Laravel (PHP), Node.js, Python
Tempat menyimpan

🗄️ Database

Tempat menyimpan data secara terstruktur & permanen: akun, postingan, transaksi.

  • Data tersusun dalam tabel (baris & kolom)
  • Bisa dicari, diubah, dihapus dengan cepat
  • Contoh: MySQL, PostgreSQL, SQLite
Analogi: lemari arsip raksasa yang super rapi & cepat dicari.
MySQL
Go live!

🚀 Deployment

Proses memublikasikan aplikasi dari komputer lokal ke internet agar bisa diakses siapa saja, di mana saja.

🚀
🌍 Online
Analogi: peresmian grand opening toko online — dari "coba-coba di rumah" menjadi "resmi buka untuk dunia".
Arsitektur Modern (1/3)

🖥️ Client

Perangkat pengguna (browser di HP/laptop) yang meminta halaman dan menampilkannya.

  • Mengirim request ke server
  • Menampilkan hasil ke pengguna
🖥️Client
☁️Server
🗄️Database
Arsitektur Modern (2/3)

☁️ Server

Komputer yang selalu menyala, menerima request, memproses logika, lalu mengirim response.

  • Menjalankan kode Backend (mis. Laravel)
  • Mengambil/menyimpan data ke Database
🖥️Client
☁️Server
🗄️Database
Arsitektur Modern (3/3)

🗄️ Database + Gambaran Utuh

Server menyimpan & mengambil data dari Database, lalu mengembalikannya ke Client. Tiga komponen, satu alur.

Client ⇄ Server ⇄ Database — saling terhubung membentuk aplikasi web utuh.
🖥️Client
☁️Server
🗄️Database
Cara Kerja Internet (1/4)

🌐 Domain & Hosting

🏷️

Domain

Alamat unik website yang mudah diingat, mis. sekolahku.com.

Analogi: nama & alamat rumahmu.
🏠

Hosting

Tempat menyimpan file & data website agar online 24 jam.

Analogi: tanah & bangunan tempat rumah berdiri.
Cara Kerja Internet (2/4)

📖 DNS

Domain Name System — penerjemah nama domain menjadi alamat IP yang dipahami komputer.

Analogi: buku telepon internet. Kamu sebut nama (domain), DNS kasih nomornya (IP).
sekolahku.com
→ DNS →
172.217.0.46
Cara Kerja Internet (3/4)

🔐 HTTP vs HTTPS

🔓

HTTP

Protokol pengiriman data tanpa enkripsi. Data bisa "diintip" di jalan.

🔒

HTTPS

HTTP + enkripsi (SSL/TLS). Data aman terkunci. Standar website modern.

Analogi: HTTP = kartu pos terbuka, HTTPS = surat tersegel di amplop terkunci.
Cara Kerja Internet (4/4)

🔁 Request & Response

Percakapan dua arah: Client bertanya (request), Server menjawab (response).

🖥️Client
📨 request
📦 response
☁️Server
Studi Kasus

Alur Data: Browser → Laravel → MySQL → Browser

🌐Browser
⚙️Laravel
🗄️MySQL
⚙️Laravel
🌐Browser
📦

Tekan tombol untuk melihat data berjalan dari awal sampai kembali.

Tools (1/2)

🧰 Editor & Server Lokal

📝

VS Code

Code editor utama untuk menulis HTML, CSS, JS, PHP. Ringan & banyak ekstensi.

🖧

Laragon / XAMPP

Server lokal (Apache + PHP + MySQL) untuk menjalankan website di komputer sendiri.

Tools (2/2)

🔧 Composer, Git & GitHub

📦

Composer

Manajer paket PHP untuk memasang library (mis. Laravel) secara otomatis.

🌿

Git

Sistem pelacak versi kode — bisa "menyimpan checkpoint" & kembali ke versi lama.

🐙

GitHub

Tempat menyimpan & berbagi kode di cloud + kolaborasi tim.

Recap

📌 Rangkuman Bab 1

FullstackFrontend + Backend + Database + Deployment
ArsitekturClient ⇄ Server ⇄ Database
InternetDomain, Hosting, DNS, HTTP/HTTPS
AlurRequest → proses → Response
ToolsVS Code, Laragon, Composer, Git, GitHub
SiapLanjut ke latihan & tugas 🎯
LATIHAN 1 · Mudah

🧩 Cocokkan Istilah

Pasangkan setiap komponen dengan analoginya yang benar (tulis di buku / diskusi kelas).

  • 1. Frontend
  • 2. Backend
  • 3. Database
  • 4. Deployment
  • A. Dapur peracik
  • B. Lemari arsip
  • C. Etalase / ruang tamu
  • D. Grand opening toko
🎯 Target: jelaskan alasan tiap pasangan dalam 1 kalimat.
LATIHAN 2 · Sedang

🗺️ Gambar Alur Request & Response

Buat diagram alur saat kamu membuka sekolahku.com di browser — dari mengetik domain hingga halaman tampil.

  1. Sebutkan peran DNS di langkah awal.
  2. Tunjukkan posisi Server (Laravel) & Database (MySQL).
  3. Tandai bagian mana yang memakai HTTPS dan kenapa penting.
🎯 Output: 1 diagram + penjelasan singkat tiap panah.
TUGAS AKHIR · Proyek Mini

🏆 Riset & Setup Ekosistem Developer

Buktikan kamu siap masuk dunia fullstack lewat 3 langkah berikut.

  1. Install VS Code, Laragon/XAMPP, Git, dan buat akun GitHub. Lampirkan screenshot.
  2. Tulis 1 halaman penjelasan: "Bagaimana website bekerja dari Client sampai Database" pakai bahasamu sendiri.
  3. Push sebuah folder berisi index.html sederhana ke repository GitHub barumu, lalu kirim link-nya.
🎯 Kriteria nilai: kelengkapan setup (40%) · kejelasan penjelasan (40%) · repo GitHub aktif (20%).
🎉 Selamat! Kamu menyelesaikan Bab 1.
Navigasi: ← → · Tema T · Menu M